Appearance
32 - 404 Pages & Next Steps
首先写一个NotFound.js页面:
jsx
import { Link } from 'react-router-dom';
const NotFound = () => {
return (
<div className="not-found">
<h2>Opps!</h2>
<p>page not found.</p>
<div style={{marginTop: "20px"}}>
<Link to="/" >Go back home ..</Link>
</div>
</div>
);
}
export default NotFound;
然后在App.js中匹配路由
jsx
<Switch>
<Route exact path="/">
<Home />
</Route>
<Route exact path="/create">
<Create />
</Route>
<Route exact path="/blogs/:id">
<BlogDetails />
</Route>
<Route path="*">
<NotFound />
</Route>
</Switch>
path="**"
表示任意路径,需要放在最下面,作为一个catch-all路由。